<script setup>
import { ref,reactive } from 'vue';
import { ContactsOutlined, CalendarOutlined, PhoneOutlined, WechatOutlined, MailOutlined } from '@ant-design/icons-vue';
import {userUserStore} from "@/stores/index.js";
import {setStuInfo} from "@/views/resumeCreation/components/contentEdit/share.js";
import {updateSkill} from "@/api/stu.js";
import {message} from 'ant-design-vue'

//绑定优势的数据
const formData = reactive({
  skill: userUserStore().userInfo.skill
});
const placeholder = ref('丰富的个人优势介绍，更能获得老板青睐');

// 是否进入编辑模式
const isCardSelected = ref(false);

// 取消编辑
const cancel = async () => {
  isCardSelected.value=false
  const resGet = await setStuInfo();  // 等待更新学生信息
  if ( resGet === 200) {
  }
};

// 确认提交
const submit = async () => {
  try {
    const resUpdate = await updateSkill({
      skills: formData.skill
    })
    isCardSelected.value = false;
    if (resUpdate.data.code === 200) {
      message.success("提交成功");

      // 更新学生信息
      const resGet = await setStuInfo();  // 等待更新学生信息
      if ( resGet === 200) {
      }
    } else {
      message.error(resUpdate.data.message);
    }
  } catch (err) {
    message.error(err.message || "提交失败");
  }
};
// 进入编辑模式
const selectCard = () => {
  isCardSelected.value = true;
};
</script>

<template>
  <!-- 编辑模式 -->
  <div class="edit-container" v-if="isCardSelected">
    <h4 style="height: 40px; margin-top: 0;">编辑个人优势</h4>
    <a-form class="form">
      <a-form-item>
        <a-textarea
            v-model:value="formData.skill"
            show-count :maxlength="500"
            :autosize="{ minRows: 6, maxRows: 10 }"
            :placeholder />
      </a-form-item>
      <a-row>
        <a-col :span="10" :push="14">
          <a-form-item>
            <div class="button-item">
              <a-button type="default" size="large" @click="cancel">取消</a-button>
              <a-button type="primary" size="large" @click="submit">确认</a-button>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- 默认模式 -->
  <div class="default-container" @click="selectCard" v-else>
    <div style="display: flex;align-items: center">
      <div class="title"></div>
      <h2>个人优势</h2>
    </div>
    <div class="user-info">
      <h4 v-if="formData.skill===''">
        {{ placeholder }}
      </h4>
      <h4 v-else v-html="formData.skill?.replace(/\n/g, '<br>')">
      </h4>
    </div>
  </div>
</template>

<style scoped>
.edit-container {
  width: 100%;
  height: 100%;
  background-color: #f5f6fa;
  padding: 20px;
  border-radius: 10px;
}

.default-container {
  width: 100%;
  padding: 20px;
  cursor: pointer;
}

.default-container:hover {
  background-color: #e6f7ff;
}

.form h4 {
  color: #454647;
}

.user-info {
  margin-left: 3px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
}
.user-info > span {
  display: flex;
  font-size: 14px;
  align-items: center;
}

.title {
  width: 4px;
  height: 25px;
  background: #00bebd;
  border-radius: 3px;
  margin-top: -8px;
  margin-right: 10px;
}

.button-item {
  display: flex;
  margin-left: 100px;
  justify-content: space-around;
}

a-button {
  margin-top: 8px;
  border: none;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

a-button:hover {
  background-color: #66bb69;
}

</style>
